<template>
  <div id="dom9">
    <div
      class="case-page"
      style="
        font-family: Arial, sans-serif;
        padding: 10px 15px;
        background-color: #fff;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <!-- 医院名称 -->
      <h1
        class="hospital-name"
        style="
          margin: 0 0 10px 0;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          width: 100%;
        "
      >
        {{ info.title }}
      </h1>
      <h1
        class="hospital-name"
        style="
          margin: 0 0 10px 0;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          width: 100%;
        "
      >
        收费单
      </h1>
      <div
        class="dotted"
        style="width: 100%; height: 12px; overflow: hidden; margin: 10px 0"
      >
        ================================
      </div>

      <div class="content_item" style="margin-top: 10px">
        <div style="line-height: 1.5">
          姓名：{{ info.patientName }}
          {{
            info.patientGender == 1
              ? '男'
              : info.patientGender == 2
              ? '女'
              : '未知'
          }}
          {{ info.ageYear }}岁{{ info.ageMonth }}月
        </div>
        <div style="line-height: 1.5">电话：{{ info.patientPhone }}</div>
        <div style="line-height: 1.5">诊号：{{ info.visitNo }}</div>
        <div style="line-height: 1.5">医生：{{ info.doctorName }}</div>
      </div>
      <div
        class="dashed"
        style="margin: 10px 0; width: 100%; height: 12px; overflow: hidden"
      >
        --------------------------------
      </div>

      <div v-for="(item, index) in info?.itemList" :key="index">
        <div class="content_item">
          <div style="display: flex; line-height: 1.5">
            <div>{{ item.itemName }}</div>
            <div style="margin-left: auto">
              {{ (item.subtotal / 100).toFixed(2) }}
            </div>
          </div>
        </div>
        <div
          class="dashed"
          style="margin: 10px 0; width: 100%; height: 12px; overflow: hidden"
        >
          ------------------------------------------------------------------
        </div>
      </div>

      <div class="content_item">
        <div style="display: flex; line-height: 1.5">
          <div>合计：</div>
          <div style="margin-left: auto">
            {{ (info.totalAmount / 100).toFixed(2) }}
          </div>
        </div>
        <div style="display: flex; line-height: 1.5">
          <div>实付：</div>
          <div style="margin-left: auto">
            {{ (info.paidAmount / 100).toFixed(2) }}({{
              payChannelEnumText(info.payChannel)
            }})
          </div>
        </div>
      </div>
      <div
        class="dashed"
        style="margin: 10px 0; width: 100%; height: 12px; overflow: hidden"
      >
        --------------------------------
      </div>
      <div class="content_item">
        <div style="line-height: 1.5">收费员：{{ info.chargeBy }}</div>
        <div style="line-height: 1.5">收费时间：{{ info.chargeTime }}</div>
        <div style="line-height: 1.5">打印人员：{{ info.printBy }}</div>
        <div style="line-height: 1.5">打印时间：{{ info.printTime }}</div>
        <div style="line-height: 1.5">地址：{{ info.address }}</div>
        <div style="line-height: 1.5">电话：{{ info.phone }}</div>
      </div>
      <div
        class="dotted"
        style="width: 100%; height: 12px; overflow: hidden; margin: 10px 0"
      >
        ================================
      </div>
      <div
        class="footer"
        style="
          width: 100%;
          font-family: Songti SC, Songti SC;
          font-weight: 400;
          font-size: 12px;
          color: #000000;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin: 15px 0;
        "
      >
        药品离柜 概不退换
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// window.print();
import stores from '@/store';
import { printDirect } from '@/utils/print';
import type { PrintConfig } from '@/utils/print';

const useBaseData = stores.useBaseDataStore();
// 支付方式枚举
const payChannelEnum = useBaseData.getEnumSelect('payChannelEnum');

const payChannelEnumText = (channel: string): string => {
  const item = payChannelEnum.find((item: any) => item.value === channel);
  return item ? item.text : '';
};
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(['onCancel']);

defineExpose<{
  open: (row: any) => void;
}>({
  open: (row: any) => {
    nextTick(() => {
      // 获取dom9元素
      const dom9Element = document.querySelector('#dom9');
      if (!dom9Element) {
        //console.error('未找到打印元素');
        //ElMessage.error('未找到打印内容');
        return;
      }

      const htmlContent = dom9Element.innerHTML || '';

      // 得力801p热敏打印机专用配置
      const printConfig: PrintConfig = {
        content: htmlContent,
        styles: {
          pageSize: 'A80',
          margin: '0mm', // 热敏打印机使用最小边距
          customStyles: '',
        },
      };

      // 调用打印（与挂号单保持一致）
      printDirect(printConfig);
    });
  },
});
</script>

<style scoped lang="scss">
.case-page {
  padding: 10px 15px;
  padding-bottom: 50px;
  background-color: #fff;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
  box-sizing: border-box;
}
.hospital-name {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
  width: 100%;
}

.footer {
  width: 100%;
  text-align: center;
}

.separator-line {
  width: 100%;
  text-align: center;
}

.content_item > div {
  line-height: 1.5;
}
.dashed {
  margin: 10px 0;
}
</style>
